<!-- by DouBao -->
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Scroll Distance</title>
    <style>
      body {
        height: 2000px;
        width: 2000px;
      }
    </style>
  </head>

  <body>
    <div id="scrollInfo" style="position: fixed; top: 50%; left: 40%">
      水平滚动距离: 0px<br />
      垂直滚动距离: 0px
    </div>

    <script>
      // 获取显示滚动信息的元素
      const scrollInfo = document.getElementById("scrollInfo");

      // 监听窗口的滚动事件
      window.addEventListener("scroll", function () {
        // 获取水平和垂直方向的滚动距离
        const scrollX = window.pageXOffset;
        const scrollY = window.pageYOffset;

        // 更新显示的滚动信息
        scrollInfo.innerHTML = `
                水平滚动距离: ${scrollX}px<br>
                垂直滚动距离: ${scrollY}px
            `;
      });
    </script>
  </body>
</html>
